<template>
   <section>
       <el-col  style="margin: 20px 0;">
           <el-input  placeholder="请输入订单号" v-model="input3">
               <template slot="prepend">订单号</template>
           </el-input>
           <el-input  placeholder="请输入会员姓名" v-model="input3">
               <template slot="prepend">会员姓名</template>
           </el-input>
           <el-input  placeholder="请输入收货人电话" v-model="input3">
               <template slot="prepend">收货人电话</template>
           </el-input>
           <div style="display: inline-block;">
               <template slot="prepend">订单状态</template>
               <el-select v-model="select" slot="append" placeholder="请选择">
                   <el-option label="已付款" value="1"></el-option>
                   <el-option label="已出库" value="2"></el-option>
                   <el-option label="已提货" value="3"></el-option>
                   <el-option label="已完成" value="3"></el-option>
                   <el-option label="全部" value="3"></el-option>
               </el-select>
           </div>

           <el-input  placeholder="请输入内容">
               <template slot="prepend">自提点门店</template>
               <el-select v-model="select" slot="append" placeholder="请选择" width="100%;">
                   <el-option label="布心店" value="1"></el-option>
                   <el-option label="南头店" value="2"></el-option>
                   <el-option label="景田店" value="3"></el-option>
                   <el-option label="全部" value="3"></el-option>
               </el-select>
           </el-input>
       </el-col>
       <el-col>
           <el-date-picker
                   v-model="value1"
                   type="date"
                   placeholder="起始日期"
                   :picker-options="pickerOptions0">
           </el-date-picker>
           <el-date-picker
                   v-model="value1"
                   type="date"
                   placeholder="截止日期"
                   :picker-options="pickerOptions0">
           </el-date-picker>
           <el-button>搜索</el-button>
           <el-button>初始化条件</el-button>
       </el-col>
       <el-col style="margin-top: 30px;">
           <el-table
                   :data="tableData"
                   :border='true'
                   style="width: 100%">
               <el-table-column
                       prop="num"
                       label="订单号"
                       align="center"
                       width="80px">
               </el-table-column>
               <el-table-column
                       prop="name"
                       label="客户名称"
                       align="center"
                       width="100px">
               </el-table-column>
               <el-table-column
                       prop="status"
                       align="center"
                       width="100px"
                       label="状态">
               </el-table-column>
               <el-table-column
                       prop="info"
                       align="center"
                       label="订单信息">
               </el-table-column>
               <el-table-column
                       prop="address"
                       align="center"
                       label="收货地址">
               </el-table-column>
               <el-table-column
                       prop="date"
                       align="center"
                       width="100px"
                       label="生成日期">
               </el-table-column>
               <el-table-column
                       prop="dateUpdate"
                       align="center"
                       width="100px"
                       label="修改日期">
               </el-table-column>
               <el-table-column
                       prop="id"
                       align="center"
                       width="120px"
                       label="自提门店ID">
               </el-table-column>
               <el-table-column
                       prop="pickName"
                       align="center"
                       width="120px"
                       label="自提门店名称">
               </el-table-column>
               <el-table-column
                       prop="pickAddress"
                       align="center"
                       label="自提门店地址信息">
               </el-table-column>
               <el-table-column
                       prop="operate"
                       align="center"
                       width="80px"
                       label="操作">
               </el-table-column>
           </el-table>
       </el-col>
       <el-col class="toolbar" style="margin-top: 20px;">
           <el-pagination
                   layout="prev, pager, next"
                   :total="100">
           </el-pagination>
       </el-col>
   </section>
</template>

<script>
    export default {
        data(){
            return {
                tableData: [
                    {num: 1,name: "客户1",status:'已提取',info: '¥ 158.00 微信公众号支付 ',address: '广东/深圳/南山/西丽镇366大街新华大厦3栋B706室/黄颖{"1":"13717038695"}',date: '2017/11/02',dateUpdate:'2017/11/02',id: '001',pickName: '留仙居店',pickAddress: '深圳市南山区西丽高新路新华大厦2号铺（西丽医院斜对面） 电话：0755-26652120',operate: '订单已完成'},
                    {num: 1,name: "客户1",status:'已提取',info: '¥ 158.00 微信公众号支付 ',address: '广东/深圳/南山/西丽镇366大街新华大厦3栋B706室/黄颖{"1":"13717038695"}',date: '2017/11/02',dateUpdate:'2017/11/02',id: '001',pickName: '留仙居店',pickAddress: '深圳市南山区西丽高新路新华大厦2号铺（西丽医院斜对面） 电话：0755-26652120',operate: '订单已完成'},
                    {num: 1,name: "客户1",status:'已提取',info: '¥ 158.00 微信公众号支付 ',address: '广东/深圳/南山/西丽镇366大街新华大厦3栋B706室/黄颖{"1":"13717038695"}',date: '2017/11/02',dateUpdate:'2017/11/02',id: '001',pickName: '留仙居店',pickAddress: '深圳市南山区西丽高新路新华大厦2号铺（西丽医院斜对面） 电话：0755-26652120',operate: '订单已完成'},
                    {num: 1,name: "客户1",status:'已提取',info: '¥ 158.00 微信公众号支付 ',address: '广东/深圳/南山/西丽镇366大街新华大厦3栋B706室/黄颖{"1":"13717038695"}',date: '2017/11/02',dateUpdate:'2017/11/02',id: '001',pickName: '留仙居店',pickAddress: '深圳市南山区西丽高新路新华大厦2号铺（西丽医院斜对面） 电话：0755-26652120',operate: '订单已完成'},
                    {num: 1,name: "客户1",status:'已提取',info: '¥ 158.00 微信公众号支付 ',address: '广东/深圳/南山/西丽镇366大街新华大厦3栋B706室/黄颖{"1":"13717038695"}',date: '2017/11/02',dateUpdate:'2017/11/02',id: '001',pickName: '留仙居店',pickAddress: '深圳市南山区西丽高新路新华大厦2号铺（西丽医院斜对面） 电话：0755-26652120',operate: '订单已完成'},
                    {num: 1,name: "客户1",status:'已提取',info: '¥ 158.00 微信公众号支付 ',address: '广东/深圳/南山/西丽镇366大街新华大厦3栋B706室/黄颖{"1":"13717038695"}',date: '2017/11/02',dateUpdate:'2017/11/02',id: '001',pickName: '留仙居店',pickAddress: '深圳市南山区西丽高新路新华大厦2号铺（西丽医院斜对面） 电话：0755-26652120',operate: '订单已完成'},
                    {num: 1,name: "客户1",status:'已提取',info: '¥ 158.00 微信公众号支付 ',address: '广东/深圳/南山/西丽镇366大街新华大厦3栋B706室/黄颖{"1":"13717038695"}',date: '2017/11/02',dateUpdate:'2017/11/02',id: '001',pickName: '留仙居店',pickAddress: '深圳市南山区西丽高新路新华大厦2号铺（西丽医院斜对面） 电话：0755-26652120',operate: '订单已完成'},
                ]
            }
        }
    }
</script>
<style lang="scss" scoped>
    .el-input-group {
        width: 240px;
        margin-right: 20px;
    }
    .el-date-editor.el-input {
        margin-right: 20px;
    }
    .el-input-group__prepend {
        color: #000;
    }

</style>